<template>
    <section class="contianer">
        <el-row type="flex" justify="space-between">
            <!-- 顶部过滤列表 -->
            <div class="flights-content">
                <!-- 过滤条件 -->
                <FlightsFilters 
                v-if="flightsData.options"
                :data="flightsData"
                @setFilteredList="setFilteredList"
                />

                <!-- 航班头部布局 -->
                <FlightsListHead />

                <!-- 航班信息 -->
                <div class="list" v-if="dataList.length > 0">
                    <FlightsItem
                        v-for="flight in dataList"
                        :key="flight.id"
                        :data="flight"
                    />
                </div>

                <!-- 分页组件 -->
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-sizes="[2,5,10,20,50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="filteredList.length"
                  :current-page="pageIndex">
                </el-pagination>
            </div>

            <!-- 侧边栏 -->
            <FlightsAside/>
        </el-row>
    </section>
</template>

<script>
import FlightsListHead from '@/components/air/FlightsListHead.vue'
import FlightsItem from "@/components/air/FlightsItem"
import FlightsFilters from '@/components/air/FlightsFilters.vue'
import FlightsAside from '@/components/air/FlightsAside.vue'
export default {
  data () {
    return {
      flightsData:{},
      // 多一个数组存放筛选后的数据
      filteredList:[],
      // 自己算出来应该显示的机票数据
      // dataList:[],
      // 当前页码
      pageIndex:1,
      // 每页页码
      pageSize:5
    }
  },
  components: {
    FlightsListHead,FlightsItem,FlightsFilters,FlightsAside
  },
  computed: {
    dataList(){
      // 因为这里面是页面进入时就执行, 不像之前可以在
      // 获取数据 .then 之后执行
      // 加一个判断, 有数据,就切割, 没数据就返回默认空数组
      if(!this.filteredList){
        return []
      }
      const end = this.pageIndex * this.pageSize
      const begin = end - this.pageSize
      return this.filteredList.slice(begin,end)
    }
  },
  watch: {
    $route(){
      this.pageIndex = 1
      this.loadPage()
    }
  },
  created () {
    this.loadPage()
  },
  methods: {
    loadPage(){
      this.$axios({
        url:'/airs',
        params:this.$route.query
      }).then(res=>{
        console.log(res.data);
        this.flightsData = res.data
        // this.dataList = this.getDataList()
        this.filteredList = [...this.flightsData.flights]
      })
    },
    handleSizeChange(newSize){
      this.pageSize = newSize
      // this.dataList = this.getDataList()
    },
    handleCurrentChange(newIndex){
      this.pageIndex = newIndex
      // this.dataList = this.getDataList()
    },
    // getDataList(){
    //   const end = this.pageIndex * this.pageSize
    //   const begin = end - this.pageSize
    //   return this.flightsData.flights.slice(begin,end)
    // }
    setFilteredList(newList){
    this.filteredList = newList
    }
  }
}
</script>

<style scoped lang="less">
    .contianer{
        width:1000px;
        margin:20px auto;
    }

    .flights-content{
        width:745px;
        font-size:14px;
    }

    .aside{
        width:240px;
    } 
</style>